import React, {Component} from 'react';
import {Flex, WhiteSpace, Button, Checkbox, Toast} from 'antd-mobile';
import api from '../api/api';
import {util} from '../util/util';
import '../util/date.format';

const CheckboxItem = Checkbox.CheckboxItem;
const request = util.request();


class BaseInfoForm extends Component {
    state = {
        womenData: [],
        headData: [],
        cwData: [],
        statusData: [],
        physicalData: [],
        otherData: []
    }

    componentDidMount() {
        let womenData = ['手脚冰凉', '内分泌失调', '痛经', '闭经'].map(item => ({
            "label": item,
            "value": item,
            "checked": false
        }))
        let headData = ['空腔溃疡', '脱发', '长痘', '眼睛干涩', '口臭', '头面出油多', '耳鸣'].map(item => ({
            "label": item,
            "value": item,
            "checked": false
        }))
        let cwData = ['消化不良', '便秘', '食欲不振', '反酸/烧心', '腹泻/腹痛', '岔气/打嗝'].map(item => ({
            "label": item,
            "value": item,
            "checked": false
        }))
        let statusData = ['睡眠质量差', '易怒/焦虑', '易疲劳', '头晕头痛', '心慌心悸', '易上火'].map(item => ({
            "label": item,
            "value": item,
            "checked": false
        }))

        let physicalData = ['出虚汗', '胸闷憋气', '易感冒', '易咳/痰多', '畏寒', '颈椎/腰腿痛', '尿频/尿急'].map(item => ({
            "label": item,
            "value": item,
            "checked": false
        }))

        let otherData = ['血糖低', '贫血', '水肿', '血脂高', '血压高', '血糖高'].map(item => ({
            "label": item,
            "value": item,
            "checked": false
        }))

        // 职业数据请求
        // this.requestProfession();

        this.setState({
            womenData,
            headData,
            cwData,
            statusData,
            physicalData,
            otherData
        })

    }

    requestProfession = () => {
        let professionData = [];
        request.get(api.profession).then(response => {
            const {message} = response.data;
            if (message && message.length) {
                professionData = message.map(item => ({
                    ...item,
                    "label": item.name,
                    "value": item.name,
                    "checked": false
                }))
            }
            this.setState({
                professionData
            })
        }).catch(error => {
            console.log(error)
        })
    }

    changeHandler = (type, value, e) => {
        // console.log(type, value, e)
        if (!type) return;
        switch (type) {
            case 'women':
                const {womenData} = this.state;
                womenData.map(item => {
                    if (item.value === value) {
                        item.checked = e.target.checked
                    }
                })
                this.setState({
                    womenData
                })
                break;
            case 'head':
                const {headData} = this.state;
                headData.map(item => {
                    if (item.value === value) {
                        item.checked = e.target.checked
                    }
                })
                this.setState({
                    headData
                })
                break;
            case 'cw':
                const {cwData} = this.state;
                cwData.map(item => {
                    if (item.value === value) {
                        item.checked = e.target.checked
                    }
                })
                this.setState({
                    cwData
                })
                break;
            case 'status':
                const {statusData} = this.state;
                statusData.map(item => {
                    if (item.value === value) {
                        item.checked = e.target.checked
                    }
                })
                this.setState({
                    statusData
                })
                break;
            case 'physical':
                const {physicalData} = this.state;
                physicalData.map(item => {
                    if (item.value === value) {
                        item.checked = e.target.checked
                    }
                })
                this.setState({
                    physicalData
                })
                break;
            case 'other':
                const {otherData} = this.state;
                otherData.map(item => {
                    if (item.value === value) {
                        item.checked = e.target.checked
                    }
                })
                this.setState({
                    otherData
                })
                break;
            default:
                break;
        }

    }

    renderWomen = () => {
        const {womenData} = this.state;
        return womenData.map((item, index) => <CheckboxItem className={item.checked ? 'active' : ''}
                                                            checked={item.checked} key={item.label}
                                                            onChange={(e) => this.changeHandler('women', item.value, e)}>
            {item.label}
        </CheckboxItem>);
    }
    renderHead = () => {
        const {headData} = this.state;
        return headData.map((item, index) => <CheckboxItem className={item.checked ? 'active' : ''}
                                                           checked={item.checked} key={item.label}
                                                           onChange={(e) => this.changeHandler('head', item.value, e)}>
            {item.label}
        </CheckboxItem>);
    }
    renderCw = () => {
        const {cwData} = this.state;
        return cwData.map((item, index) => <CheckboxItem className={item.checked ? 'active' : ''}
                                                         checked={item.checked} key={item.label}
                                                         onChange={(e) => this.changeHandler('cw', item.value, e)}>
            {item.label}
        </CheckboxItem>);
    }
    renderStatus = () => {
        const {statusData} = this.state;
        return statusData.map((item, index) => <CheckboxItem className={item.checked ? 'active' : ''}
                                                             checked={item.checked} key={item.value}
                                                             onChange={(e) => this.changeHandler('status', item.value, e)}>
            {item.label}
        </CheckboxItem>);
    }
    renderPhysical = () => {
        const {physicalData} = this.state;
        return physicalData.map((item, index) => <CheckboxItem className={item.checked ? 'active' : ''}
                                                               checked={item.checked} key={item.value}
                                                               onChange={(e) => this.changeHandler('physical', item.value, e)}>
            {item.label}
        </CheckboxItem>);
    }
    renderOther = () => {
        const {otherData} = this.state;
        return otherData.map((item, index) => <CheckboxItem className={item.checked ? 'active' : ''}
                                                            checked={item.checked} key={item.value}
                                                            onChange={(e) => this.changeHandler('other', item.value, e)}>
            {item.label}
        </CheckboxItem>);
    }
    nextHandler = () => {
        const {womenData} = this.state;

        Toast.info('提交');
    }

    render() {
        const {womenData} = this.state;
        const {clickHandlerBack} = this.props;
        return (
            <div className="base-info-form">
                <div className="fixed-top">
                    <a className="btn-back"
                        onClick={clickHandlerBack.bind(null,'back')}
                    ><i
                        className="icon anticon">&#xe620;</i></a>
                </div>
                <h2>您想通过饮食改善哪些症状？</h2>
                <p>可在系统默认判断基础上手动调整</p>
                <WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item style={{color: "#000"}}>
                        女性 <span style={{fontSize: '12px', color: '#999'}}>(可多选)</span>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item>
                        <div className="work-checkboxs">
                            {this.renderWomen()}
                        </div>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/><WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item style={{color: "#000"}}>
                        头部 <span style={{fontSize: '12px', color: '#999'}}>(可多选)</span>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item>
                        <div className="work-checkboxs">
                            {this.renderHead()}
                        </div>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/><WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item style={{color: "#000"}}>
                        肠胃 <span style={{fontSize: '12px', color: '#999'}}>(可多选)</span>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item>
                        <div className="work-checkboxs">
                            {this.renderCw()}
                        </div>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/><WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item style={{color: "#000"}}>
                        状态 <span style={{fontSize: '12px', color: '#999'}}>(可多选)</span>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item>
                        <div className="work-checkboxs">
                            {this.renderStatus()}
                        </div>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/>
                <WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item style={{color: "#000"}}>
                        体质 <span style={{fontSize: '12px', color: '#999'}}>(可多选)</span>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item>
                        <div className="work-checkboxs">
                            {this.renderPhysical()}
                        </div>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/>
                <WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item style={{color: "#000"}}>
                        其他 <span style={{fontSize: '12px', color: '#999'}}>(可多选)</span>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/>
                <Flex>
                    <Flex.Item>
                        <div className="work-checkboxs">
                            {this.renderOther()}
                        </div>
                    </Flex.Item>
                </Flex>
                <WhiteSpace size="lg"/>
                <WhiteSpace size="lg"/>
                <Button className="pipi-btn" onClick={this.nextHandler}>完成</Button>
                <WhiteSpace size="lg"/>
                <WhiteSpace size="lg"/>
            </div>
        )
    }
}

export default BaseInfoForm;